<template>
  <v-container fluid>
    <v-layout row>
      <v-flex 12>
        <v-btn fab color="error" @click="addFiles">
          <v-icon>add</v-icon>
          <input type="file" name="file" id="files_input" @change="fileChange">
        </v-btn>
      </v-flex>
    </v-layout>
    <v-layout class="note_list" column>
      <v-flex class="create_note">
        <v-data-table
          :items="notes"
          :headers="createHeaders"
          expand
          v-if="notes.length > 0">
            <template slot="items" slot-scope="props">
              <tr @click="props.expanded = !props.expanded">
                <td>{{ props.item.title }}</td>
                <td>{{ props.item.name }}</td>
              </tr>
            </template>
          </v-data-table>
      </v-flex>
      <v-flex>
        <v-data-table
          :items="notes"
          v-if="note_list"></v-data-table>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {

  name: 'NoteManager',

  data () {
    return {
      create: false,
      note_list: true,
      postAction: this.$store.state.global.apiBase + '/upload_artical/',
      notes: [],
      createHeaders: [
        { text: 'Title', value: 'title', sortable: false, align: 'left' },
        { text: 'Filename', value: 'name', sortable: false, align: 'left' },
        { text: 'Actions', sortable: false, align: 'left' }
      ]
    }
  },

  methods: {
    addFiles () {
      let input = document.getElementById('files_input')
      input.click()
    },
    fileChange () {
      let input = document.getElementById('files_input')
      if (input.files) {
        let files = input.files
        for (let i = 0; i < files.length; i++) {
          let file = files[i]
          file = {
            file,
            size: file.size,
            name: file.webkitRelativePath || file.relativePath || file.name || 'unknown',
            type: file.type
          }
          file.title = file.name.replace(/([^.]+)\.[A-z]+$/, '$1')
          this.notes.push(file)
        }
      }
    }
  }
}
</script>

<style lang="css" scoped>
input {
  height: 1px;
  width: 1px;
  z-index: -1;
  opacity: 0;
}
.note_list {
  margin: .8em 0;
}
div.create_note {
  margin-bottom: .8em;
}
</style>
